// 实现这个项目的构建任务
const { series, parallel,src, dest, watch } = require('gulp')
const del = require('del') //清除文件模块儿，yarn add del --dev
const browserSync = require('browser-sync')
// const babel = require('gulp-babel')
// const sass = require('gulp-sass')
// const swig = require('gulp-swig')
// const imagemin = require('gulp-imagemin')
const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins() 

const base = 'src'
const public = 'public'
const dist = 'dist'
const temp = 'temp'
const stylePath = 'assets/styles/*.scss'
const scriptPath = 'assets/scripts/*.js'
const pagePath = '**/*.html'
const imagePath = 'assets/images/**'
const fontPath = 'assets/fonts/**'
const data = {
  menus: [
    {
      name: 'Home',
      icon: 'aperture',
      link: 'index.html'
    },
    {
      name: 'Features',
      link: 'features.html'
    },
    {
      name: 'About',
      link: 'about.html'
    },
    {
      name: 'Contact',
      link: '#',
      children: [
        {
          name: 'Twitter',
          link: 'https://twitter.com/w_zce'
        },
        {
          name: 'About',
          link: 'https://weibo.com/zceme'
        },
        {
          name: 'divider'
        },
        {
          name: 'About',
          link: 'https://github.com/zce'
        }
      ]
    }
  ],
  pkg: require('./package.json'),
  date: new Date()
}

const bs = browserSync.create()

const clean = () => {
  return del([dist,temp])
}

const style = () => {
  return src(stylePath,{ base: base,cwd:base })
    .pipe(plugins.sass({outputStyle: 'expanded'}))
    .pipe(dest(temp))
    .pipe(bs.reload({stream:true}))
}
const script = () => {
  return src(scriptPath,{ base: base,cwd:base})
    .pipe(plugins.babel({ presets: ['@babel/preset-env']}))
    .pipe(dest(temp))
    .pipe(bs.reload({stream:true}))
}
const page = () => {
  return src(pagePath,{ base: base,cwd:base})
    .pipe(plugins.swig({data:data}))
    .pipe(dest(temp))
    .pipe(bs.reload({stream:true}))
}

const image = () => {
  return src(imagePath, {base: base,cwd:base}) // images下的所有文件
    .pipe(plugins.imagemin())
    .pipe(dest(dist))
}

const font = () => {
  return src(fontPath, {base: base,cwd:base})
    .pipe(plugins.imagemin())
    .pipe(dest(dist))
}

const extra = () => {
  return src('**', {base: public,cwd:public})
    .pipe(dest(dist))
}

const serve = () => {
  watch(stylePath, { cwd: base }, style)
  watch(scriptPath, { cwd: base }, script)
  watch(pagePath, { cwd: base }, page)
  watch([
    imagePath,
    fontPath,
  ], { cwd: base }, bs.reload)

  watch('**',{ cwd: base }, bs.reload )

  bs.init({
    notify: false,
    port: 2080,
    // open: false,
    // files: 'dist/**',
    server: {
      baseDir: [temp, base, public],
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  })
}

const useref = () =>{
  return src(pagePath, { base: temp, cwd:temp})
    .pipe(plugins.useref({ searchPath: [temp, '.']}))
    //html js css
    .pipe(plugins.if(/\.js$/, plugins.uglify()))//是否是js,是则使用uglify插件压缩文件，需要先编译在压缩
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    .pipe(plugins.if(/\.html$/, plugins.htmlmin({
collapseWhitespace:true,//折叠html中换行字符
    minifyCss:true,//压缩css
    minifyJS:true // 压缩js
    })))
    .pipe(dest(dist))
}

const compile = parallel(style,script,page)
const build = series(
  clean,
  parallel(
    series(compile, useref), 
    image, 
    font, 
    extra
  )
)
const develop = series(compile, serve)
module.exports = {
  clean,
  build,
  develop
}